<template>
  <Modal v-model:visible="open" @ok="handleSuccess">
    <div style="padding: 30px 10px">
      <div></div>
      <div
        class="min-h-30px"
        style="border: 1px solid #000; border-radius: 6px; padding: 5px; margin: 16px 0"
        >{{ newData }}</div
      >
      <div class="flex">
        <div
          class="flex flex-wrap w-301px"
          style="border-top: 1px solid #000; border-left: 1px solid #000"
        >
          <div
            class="w-60px h-60px cursor-pointer flex items-center justify-center"
            style="border-right: 1px solid #000; border-bottom: 1px solid #000"
            v-for="item in opList"
            :key="item.value"
            @click="handleClick(item.value)"
          >
            {{ item.label }}
          </div>
        </div>
        <div class="ml-2 w-160px h-300px overflow-auto">
          <div
            class="mb-1 cursor-pointer"
            v-for="(item, index) in fieldList"
            :key="index"
            @click="handleClick(item.name, item)"
            >{{ item.title }}</div
          >
        </div>
      </div>
    </div>
  </Modal>
</template>
<script setup lang="ts">
  import { ref, PropType, computed, watch } from 'vue';
  import { Modal, message } from 'ant-design-vue';
  import {
    getFormGetFieldsByNumeric,
    getFormGetNestFieldsByNumeric,
  } from '/@/api/formDesign/formDesign';
  import { useRouter } from 'vue-router';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: String,
      default: '',
    },
  });
  const emit = defineEmits(['success', 'update:visible']);
  const { currentRoute } = useRouter();

  const open = computed({
    get() {
      console.log('props.visible', props.visible, 'props.data', props.data);
      getFieldListData();
      return props.visible;
    },
    set(e) {
      emit('update:visible', e);
    },
  });
  const newData = ref('');
  watch(
    () => props.data,
    (newVal) => {
      newData.value = newVal;
    },
    {
      immediate: true,
    },
  );
  const handleClose = () => {
    open.value = false;
  };

  const handleSuccess = () => {
    emit('success', newData.value);
    handleClose();
  };

  let fhType = '';
  //点击
  const handleClick = (val, field) => {
    if (field?.isNest) {
      newData.value = 'sum(nest.' + field.name + ')';
      return;
    }
    const code = val; // 当前输入的字符
    console.log('code', code);
    let orgFormulaVal = newData.value;
    console.log('orgFormulaVal', orgFormulaVal);

    let fh = fhType ? fhType : ''; //$('#fhType').val(); // 上一次输入的字符
    console.log('isNaN(code)', isNaN(code));
    if (isNaN(code)) {
      //如果不是数字的时候
      if (code == 'sum') {
        if (fh != undefined && fh != '') {
          if (fh != '+' && fh != '-' && fh != '*' && fh != '/') {
            return;
          }
        }
      }
      if (orgFormulaVal) {
        if (fh != undefined && fh != '') {
          //至少点击输入一次
          if (code == fh) {
            //如果两次输的一样的时候，返回
            return;
          }
          if (!isNaN(fh)) {
            if (!isNaN(code)) {
              //   $('#orgFormula').val(orgFormulaVal + code);
              newData.value += code;
            } else {
              if (
                code != '+' &&
                code != '-' &&
                code != '*' &&
                code != '/' &&
                code != 'C' &&
                code != '.' &&
                code != ')'
              ) {
                return;
              }
            }
          } else {
            if (
              fh != '+' &&
              fh != '-' &&
              fh != '*' &&
              fh != '/' &&
              fh != 'C' &&
              fh != '(' &&
              fh != ')' &&
              fh != ',' &&
              fh != '.'
            ) {
              if (
                code != '+' &&
                code != '-' &&
                code != '*' &&
                code != '/' &&
                code != 'C' &&
                code != '(' &&
                code != ')' &&
                code != ','
              ) {
                return;
              }
            }

            if (fh == '+' || fh == '-' || fh == '*' || fh == '/') {
              //如果两次都是输入符号
              if (code == '+' || code == '-' || code == '*' || code == '/') {
                return;
              }
            }
          }
        } else {
          if (code == 'C') {
            fhType = '';
            newData.value = '';
            return;
          }

          if (code != '+' && code != '-' && code != '*' && code != '/') {
            return;
          }
        }
      } else {
        if (fh != undefined && fh != '') {
          //至少点击输入一次
          if (code == fh) {
            //如果两次输的一样的时候，返回
            return;
          }

          if (fh == '+' || fh == '-' || fh == '*' || fh == '/') {
            //如果两次都是输入符号
            if (code == '+' || code == '-' || code == '*' || code == '/') {
              return;
            }
          }

          if (
            fh != '+' &&
            fh != '-' &&
            fh != '*' &&
            fh != '/' &&
            fh != 'C' &&
            fh != '(' &&
            fh != ')' &&
            fh != ',' &&
            fh != '.'
          ) {
            if (
              code != '+' &&
              code != '-' &&
              code != '*' &&
              code != '/' &&
              code != 'C' &&
              code != '(' &&
              code != ')' &&
              code != ','
            ) {
              return;
            }
          }
        } else {
          if (code == '+' || code == '-' || code == '*' || code == '/') {
            return;
          }
        }
      }

      if (code == 'C') {
        fhType = '';
        newData.value = '';
        return;
      }
    }

    if (!isNaN(code)) {
      //是数字的时候
      if (code == 'sum') {
        if (fh != undefined && fh != '') {
          if (fh != '+' && fh != '-' && fh != '*' && fh != '/' && fh != '.') {
            return;
          }
        }
      }

      if (orgFormulaVal != '') {
        if (fh != undefined && fh != '') {
          //至少点击输入一次
          if (!isNaN(fh)) {
            if (!isNaN(code)) {
              newData.value += code;
            } else {
              if (code != '+' && code != '-' && code != '*' && code != '/' && code != 'C') {
                return;
              }
            }
          } else {
            if (
              fh != '+' &&
              fh != '-' &&
              fh != '*' &&
              fh != '/' &&
              fh != 'C' &&
              fh != '(' &&
              fh != ')' &&
              fh != ',' &&
              fh != '.'
            ) {
              if (
                code != '+' &&
                code != '-' &&
                code != '*' &&
                code != '/' &&
                code != 'C' &&
                code != '(' &&
                code != ')' &&
                code != ','
              ) {
                return;
              }
            }
          }
        } else {
          if (code != '+' && code != '-' && code != '*' && code != '/') {
            return;
          }
        }
      }
    }

    if (fh == '(') {
      if (code == '+' || code == '-' || code == '*' || code == '/') {
        return;
      }
    }

    if (fh == ')') {
      if (code != '+' && code != '-' && code != '*' && code != '/') {
        return;
      }
    }
    if (fh == 'sum') {
      if (code != '+' && code != '-' && code != '*' && code != '/' && code != '.') {
        return;
      }
    }

    if (code != 'C') {
      fhType = code;
    } else {
      fhType = '';
      newData.value = '';
    }

    newData.value += code;
    console.log('newDatanewData', newData.value);
  };

  const opList: any = [
    {
      label: 'C',
      value: 'C',
    },
    {
      label: '(',
      value: '(',
    },
    {
      label: ')',
      value: ')',
    },
    {
      label: '+',
      value: '+',
    },
    {
      label: '-',
      value: '-',
    },
    {
      label: '*',
      value: '*',
    },
    {
      label: ',',
      value: ',',
    },
    {
      label: 'subDate',
      value: 'subDate',
    },
    {
      label: 'addDate',
      value: 'addDate',
    },
    {
      label: '/',
      value: '/',
    },
    {
      label: 9,
      value: 9,
    },
    {
      label: 8,
      value: 8,
    },
    {
      label: 7,
      value: 7,
    },
    {
      label: 6,
      value: 6,
    },
    {
      label: 5,
      value: 5,
    },
    {
      label: 4,
      value: 4,
    },
    {
      label: 3,
      value: 3,
    },
    {
      label: 2,
      value: 2,
    },
    {
      label: 1,
      value: 1,
    },
    {
      label: 0,
      value: 0,
    },
    {
      label: '.',
      value: '.',
    },
  ];

  const fieldList = ref<Recordable[]>([]);
  const getFieldListData = async () => {
    let formCode = currentRoute.value?.query.formCode;
    let params = { formCode };
    fieldList.value = await getFormGetFieldsByNumeric(params);
    fieldList.value.forEach((item) => {
      delete item.options;
      // item.label = item.title;
      item.value = item.name;
    });

    let arr: any = ref([]);
    arr.value = await getFormGetNestFieldsByNumeric(params);
    arr.value.forEach((item) => {
      delete item.options;
      item.title = item.formName + '=>' + item.title;
      item.value = 'nest.' + item.name;
      item.isNest = true;
    });

    fieldList.value = [...fieldList.value, ...arr.value];

    console.log('fieldList.value', fieldList.value);
  };
</script>
